<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件fu-form而设计的。
		</demo-desc>
		
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-input v-model="value" placeholder="请输入内容"></fu-input>
			</view>
		</fu-section>
		
		<fu-section title="可清空内容" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-input placeholder="请输入内容" clearable></fu-input>
			</view>
		</fu-section>
		
		<fu-section title="数字键盘" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-input placeholder="请输入内容" type="number" clearable></fu-input>
			</view>
		</fu-section>
		
		<fu-section title="密码类型" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-input placeholder="请输入内容" :password="true" clearable></fu-input>
			</view>
		</fu-section>
		
		<fu-section title="显示下划线" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-input placeholder="请输入内容" border="bottom" clearable></fu-input>
			</view>
		</fu-section>
		
		<fu-section title="禁用状态" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-input placeholder="禁用状态" :disabled="true" @click="$fu.toast('被点击了')"></fu-input>
			</view>
		</fu-section>
		
		<fu-section title="圆形" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-input placeholder="请输入内容" shape="circle"></fu-input>
			</view>
		</fu-section>
		
		<fu-section title="前后图标" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-input placeholder="前置图标" shape="circle" prefixIcon="magnifier"></fu-input>
				<fu-input placeholder="后置图标" shape="circle" suffixIcon="location-fill" margin="20rpx 0 0 0"></fu-input>
			</view>
		</fu-section>
		
		<fu-section title="前后插槽" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-input placeholder="前置插槽" shape="circle">
					<template v-slot:prefix>
						<view class="fu-font-28 fu-m-r-10" style="color: #999999;">https://</view>
					</template>
				</fu-input>
				<fu-input placeholder="后置插槽" shape="circle" margin="20rpx 0 0 0">
					<template v-slot:suffix>
						<fu-code-verify ref="codeVerifyRef" @send="handleSend"></fu-code-verify>
					</template>
				</fu-input>
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	// data数据
	const codeVerifyRef = ref();
	let value = ref();
	
	// methods方法
	const handleSend = () => {
		setTimeout(() => {
			codeVerifyRef.value.startTimer()
		}, 500)
	};
	
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>